<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发布动态</block>
		</cu-custom>
		<view class="container">
			<textarea placeholder="这一刻的想法..." :auto-height="true" maxlength="-1" v-model="content"
				class="post-txt"></textarea>
			<!-- 上传图片 -->
			<free-upload-image :data="imageList" v-if="type === 'image'" @update="updateImage"></free-upload-image>
			<!-- 上传视频 -->
			<view v-if="type === 'video' && !video" class="upload-wrap" 
			hover-class="bg-hover-light" @click="uploadVideo">
				<image class="icon" :src=" imgUrl + '/video.png'"></image>
				<text>上传视频</text>
				<!-- <text class="text-muted" style="font-size: 100rpx;">+</text> -->
			</view>
			<video v-if="type === 'video' && video && video.src" :src="video.src" :poster="video.poster" controls></video>
			<view v-if="type === 'video' && video && video.src" class="my-3 flex align-center justify-center bg-light" hover-class="bg-hover-light" style="height: 100rpx;" @click="uploadVideo">
				<text class="font-md text-muted">点击切换视频</text>
			</view>		
			<!-- 所在位置 -->
			<free-list-item title="所在位置" showRight :showLeftIcon="false" @click="chooseLocation">
				<text slot="right" class="font-md">{{ form.location || '所在位置' }}</text>
			</free-list-item>
			<!-- 提醒谁看 -->
			<free-list-item title="提醒谁看" showRight :showLeftIcon="false" @click="openRemind">
				<view slot="right" class="flex">
					<view class="ml-1" v-for="(item,index) in remindList" :key="index">
						<free-avatar :src="item.avatar" size="50"></free-avatar>
					</view>
				</view>
			</free-list-item>
			<!-- 谁可以看 -->
			<free-list-item title="谁可以看" showRight :showLeftIcon="false" @click="openSee">
				<text slot="right" class="font-md">{{seeText}}</text>
			</free-list-item>
			<view class="submit-btn">
				<q-button v-if="type == 'image'" @click="submit" shape="circle">发布</q-button>
				<q-button v-if="type == 'video'" @click="submit" shape="circle">发布</q-button>
			</view>
		</view>

	</view>
</template>

<script>
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeUploadImage from '@/components/free-ui/free-upload-image.vue';
	import freeAvatar from '@/components/free-ui/free-avater.vue';
	export default {
		components: {
			freeListItem,
			freeUploadImage,
			freeAvatar
		},
		data() {
			return {
				imgUrl:this.$site.img_url,
				content:"",
				imageList:[],
				type:"image",
				video:false,
				form: {
					longitude: 0,
					latitude: 0,
					address: ''
				},
				remindList:[],
				seeObj:{
					k:"all",
					v:[]
				},
				header: {
					token: uni.getStorageSync('token')
				},
				isTopic: true
			};
		},
		computed:{
			seeText() {
				let type = {
					all:"公开",
					none:"私密",
					only:"谁可以看",
					except:"不给谁看"
				}
				if(this.seeObj.k === 'all' || this.seeObj.k === 'none'){
					return type[this.seeObj.k]
				}
				let names = (this.seeObj.v.map(item=>item.name)).join(',')
				return `${type[this.seeObj.k]}:${names}`
			},
			seeData(){
				if(this.seeObj.k === 'all' || this.seeObj.k === 'none'){
					return this.seeObj.k
				}
				let ids = (this.seeObj.v.map(item=>item.user_id)).join(',')
				return `${this.seeObj.k}:${ids}`
			}
		},
		onLoad(e) {
			this.type = e.type
			uni.$on('sendResult',this.sendResult)
		},
		destroyed() {
			uni.$off('sendResult',this.sendResult)
		},
		// onLoad(options) {
		// 	this.form.type = options.type;

		// 	if (options.is_topic) {
		// 		this.isTopic = options.is_topic;
		// 	}

		// 	if (options.topic_id) {
		// 		this.form.topic_id = options.topic_id;
		// 		this.isTopic = false;
		// 	}
		// 	if (options.discuss_id) {
		// 		this.form.discuss_id = options.discuss_id;
		// 	}

		// 	let location = uni.getStorageSync('location_info');
		// 	this.form.longitude = location.longitude;
		// 	this.form.latitude = location.latitude;
		// },
		methods: {
			sendResult(e){
				if(e.type === 'remind'){
					this.remindList = e.data
				}
				if(e.type === 'see'){
					this.seeObj = e.data
				}
			},
			//提醒谁看
			openRemind(){
				uni.navigateTo({
					url:'/pages/infochat/mail?type=remind'
				});
			},
			//谁可以看
			openSee(){
				uni.navigateTo({
					url:'/pages/infochat/mail?type=see'
				});
			},
			//上传图片
			updateImage(list){
				this.imageList = list
			},
			//上传视频
			uploadVideo(){
				uni.chooseVideo({
					maxDuration:10,
					success: (e) => {
						this.$C.upload('/upload',{
							filePath:e.tempFilePath
						},(progress)=>{
							console.log('上传进度',progress);
						}).then(url=>{
							this.video = {
								src:url,
								poster:url + '?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png'
							}
						})
					}
				})
			},
			
			//选择位置
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.form.location = res.address;
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
					}
				});
			},
			
			submit(){
				this.$C.post('/moment/create',{
					content:this.content,
					image:this.imageList.join(','),
					video:this.video ? JSON.stringify(this.video) : '',
					type:this.type,
					location:this.form.location,
					remind:(this.remindList.map(item=>item.user_id)).join(','),
					see:this.seeData,
				}).then(res=>{
					uni.showToast({
						title: '发布成功',
						icon: 'none'
					});
					uni.navigateBack({
						delta: 1
					});
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.title-input {
		border-bottom: 1px solid #F5F5F5;
		background: #FFFFFF;
		margin: 20rpx 0;
		padding: 20rpx 0;

		input {
			padding: 0 20rpx;
		}
	}

	.post-txt {
		width: 100%;
		padding: 20rpx 20rpx;
		background: #FFFFFF;
		min-height: 300rpx;
	}

	.upload-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		background-color: #F5F5F5;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.icon {
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 24rpx;
		}
	}

	.upload-video {
		width: 180rpx;
		height: 180rpx;
		margin-top: 30rpx;
	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			color: #999;
		}

		.add-icon {
			margin-left: 0;
		}
	}

	.submit-btn {
		margin-top: 50rpx;
		color: white;
	}
</style>
